<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>驴妈妈流立方</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
    <script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
    <script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
    <script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
    <script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
    <script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
    <script src="${rc.contextPath}/assets/js/spin.min.js"></script>
    <!-- ace scripts -->
    <script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
    <script src="${rc.contextPath}/assets/js/ace.min.js"></script>
    <!-- validator scripts -->
    <script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
    <!-- user scripts -->
    <script src="${rc.contextPath}/assets/js/user/base.js"></script>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css"/>
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css"/>
    <!-- text fonts -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css"/>
    <!-- BootstrapValidator -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css"/>
    <!-- ace styles -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet"
          id="main-ace-style"/>
    <!-- ace settings handler -->
    <script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css"/>

</head>

<body class="no-skin" style="background-color: #FFF;">
<div class="page-content">
    <div class="page-search-area">
        <div class="widget-box">
            <div class="widget-body" style="background-color: #EFF3F8;">
                <div class="widget-main">
                    <form class="form-horizontal" id="searchForm" method="post"
                          action="${rc.contextPath}/deviceNotificationStatistic/list">
                        <div class="row">
                            <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <div class="form-group no-margin">
                                    <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label no-padding-left"
                                           for="platform">设备平台</label>
                                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 no-padding">
                                        <select class="form-control chosen-select" name="platform" id="platform">
                                            <#list platformTypeList as platformType>
                                                <option value="${platformType.value}"
                                                <#if conditionVO.platform == platformType.value>selected</#if>
                                                >${platformType.showName}</option>
                                            </#list>
                                        </select>

                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <div class="form-group no-margin">
                                    <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label no-padding-left"
                                           for="statisticDateRange">选择时段</label>
                                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 no-padding">
                                        <input type="text" id="statisticDateRange" name="statisticDateRange"
                                               class="form-control"
                                               value="${conditionVO.statisticDateRange}"/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <div class="form-group no-margin">
                                    <label class="sr-only"></label>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">
                                        <button type="button" class="btn btn-pink btn-sm" id="searchBtn">
                                            <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                            查询
                                        </button>
                                        <#if statistics?? && statistics?size&gt;0>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <button type="button" class="btn btn-pink btn-sm" id="exportBtn">
                                                <span class="ace-icon fa fa-download icon-on-right bigger-110"></span>
                                                导出Excel
                                            </button>
                                        </#if>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="row" id="failuerTable">
            <div class="col-xs-12">
                <div class="widget-box">
                    <!--<div class="widget-header widget-header-small">-->
                    <!--</div>-->
                    <div class="row">
                        <div class="col-xs-12">
                            <div style="width: 100%; margin: 0 auto;">
                                <table id="dynamic-table"
                                       class="table table-striped table-bordered table-hover dataTable no-footer"
                                       role="grid" aria-describedby="dynamic-table_info">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center">平台</th>
                                        <th style="text-align: center">总用户数</th>
                                        <th style="text-align: center">新增用户数</th>
                                        <th style="text-align: center">日活跃用户数</th>
                                        <th style="text-align: center">开启推送用户数</th>
                                        <th style="text-align: center">关闭推送用户数</th>
                                        <th style="text-align: center">新增开启推送数</th>
                                        <th style="text-align: center">新增关闭推送数</th>
                                        <th style="text-align: center">统计日期</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <#if statistics?? && statistics?size&gt;0>
                                        <#list statistics as statistic>
                                            <tr class="">
                                                <td style="text-align: center">${statistic.platform!}</td>
                                                <td style="text-align: right">${statistic.totalNum!}</td>
                                                <td style="text-align: right">${statistic.incNum!}</td>
                                                <td style="text-align: right">${statistic.activeNum!}</td>
                                                <td style="text-align: right">${statistic.allowNum!}</td>
                                                <td style="text-align: right">${statistic.prohibitNum!}</td>
                                                <td style="text-align: right">${statistic.incAllowNum!}</td>
                                                <td style="text-align: right">${statistic.incProhibitNum!}</td>
                                                <td style="text-align: center">${statistic.statisticDate!}</td>
                                            </tr>
                                        </#list>
                                        <#else>
                                            <tr>
                                                <td colspan="12">
                                                    <div class="alert alert-danger" style="margin-bottom: 0px;"
                                                         role="alert">没有记录!
                                                    </div>
                                                </td>
                                            </tr>
                                    </#if>
                                    </tbody>
                                </table>
                                <#include "paginator.html">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="${rc.contextPath}/assets/js/moment.min.js"></script>
    <script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>

    <!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-theme.min.css"> -->
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
    <script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>

    <script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/javascripts/china.js"></script>
    <script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            //默认查昨日数据
            var startDate = new Date(new Date().getTime() - 1000 * 60 * 60 * 24);
            var endDate = new Date(new Date().getTime() - 1000 * 60 * 60 * 24);

            //判断是不是查询条件已设置，如果已设置，使用查询条件中的时间段
            var statisticStartDate = "${conditionVO.statisticStartDate}";
            var statisticEndDate = "${conditionVO.statisticEndDate}";
            if (statisticStartDate) {
                startDate = statisticStartDate
            }
            if (statisticEndDate) {
                endDate = statisticEndDate
            }
            $('#statisticDateRange').daterangepicker({
                    startDate: startDate,
                    endDate: endDate,
                    showDropdowns: true,
                    showWeekNumbers: false,
                    timePicker: false,
                    timePicker12Hour: false,
                    ranges: {
                        '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        '最近7日': [moment().subtract(7, 'days'), moment().subtract(1, 'days')]
                    },

                    opens: 'right',
                    //  buttonClasses : [ 'btn btn-default' ],
                    applyClass: 'btn-small btn-pink blue',
                    cancelClass: 'btn-small',
                    locale: {
                        applyLabel: '确定',
                        cancelLabel: '取消',
                        fromLabel: '起始时间',
                        toLabel: '结束时间',
                        separator: ' 至 ',
                        format: 'YYYY-MM-DD',
                        customRangeLabel: '指定时间段',
                        daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                            '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        firstDay: 1
                    }
                },
                function (start, end, label) {//格式化日期显示框
                    $('#statisticDateRange').val(start.format('yyyy-MM-dd') + ' - ' + end.format('yyyy-MM-dd'));
                });
            var message = "${message}";
            if (!isEmpty(message)) {
                showMsg(message);
            }

            $("#searchBtn").on("click", function () {
                $(this).attr("disabled", "true");
                $(this).attr("readOnly", "true");
                $("#searchForm").submit();
            });

            $("#exportBtn").on("click", function () {
                var elemIF = document.createElement("iframe");
                elemIF.src = '${rc.contextPath}/deviceNotificationStatistic/export?' + $("#searchForm").serialize();
                elemIF.style.display = "none";
                document.body.appendChild(elemIF);
            });
        })
    </script>


    <script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>

</body>
</html>